<html>
<head>
	<title>芭蕉花管理平台-保险精选</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="SHORTCUT ICON" href="/img/favicon.ico">
	<script type="text/javascript">
		var pathname = window.location.pathname;
		if (pathname != "/mobile/home.html") {
			location.href = '/';
		}
	</script>
	<style type="text/css">
		.search-box.condition-hidden .search-condition {display: none;}
		.btn {appearance: none; -moz-appearance: none; -webkit-appearance: none;}
		.card {border-radius: 0; border-left: 0; border-right: 0; overflow: visible;}
		.card-header {padding: 0;border-radius: 0; background-color: #fff;}
		.card-header .btn {border-radius: 0; background-color: rgba(0,0,0,.03);}
		.card-header .btn.collapsed {background-color: #fff;}
		.card-body {padding: 0.5rem;}
		.card-img-box {text-align: center; padding-bottom: 0.25rem;}
		.card-img {width: auto; height: 4rem; max-width: 100%; padding : 2px; box-shadow: 1px 2px 10px #bbb;}
		.card-name {font-size: 1rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25rem;}
		.card-money {font-size: .875em; color: #777;}
		.card-money .money {display: inline-block; width: 50%; text-align: left;}
		.card-money .unit {display: inline-block; width: 50%; text-align: right;}
		.card-money-remark {font-size: .875em; color: #777;}
		.card-f-url {font-size: .875em; color: #777;}
		.card-remark {font-size: .875em; color: #777;}
		ul.card-opt {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 0; margin: 0; border-top: 1px solid #ccc;}
		ul.card-opt>li {position: relative; display: block; padding-top: 3em; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;}
		ul.card-opt>li:active {background: rgba(0,123,255,.15);}
		ul.card-opt>li>i {position: absolute; top: .25em; left: 0; right: 0; display: block; text-align: center; line-height: 1em; font-size: 2em;}
		ul.card-opt>li>span {display: block; text-align: center;}
		#dataInfo {margin-top: .5rem; font-size: .6rem; color: #777; text-align: right;}
		#pageList {margin-top: 1.25rem;}
		#pageList nav {display: inline-block;}
		#pageList .page-link:hover {z-index: 2; color: #007bff; text-decoration: none; background-color: #fff; border-color: #dee2e6;}
		#pageList .page-link:active {z-index: 2; color: #0056b3; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6;}
		#pageList .page-link:focus {box-shadow: none;}
	</style>
</head>
<body>
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#" onclick="goMenu();return false;"><i class="fa fa-chevron-left"></i><span style="padding-left: 10px;">菜单</span></a></li>
				<li class="breadcrumb-item active" aria-current="page">保险精选</li>
			</ol>
		</nav>
		<div class="row collapse" id="searchBox">
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<input type="text" id="searchKey" class="form-control" placeholder="输入名称搜索"/>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<button type="button" onclick="search();"  class="btn btn-block btn-primary">搜索</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xl-12">
				<div class="form-group">
					<a type="button" id="searchBoxCollapse" class="btn btn-block btn-light" data-toggle="collapse" data-target="#searchBox" aria-expanded="false" aria-controls="searchBox"><span style="padding-right: 1rem; font-size: 0.875rem; color: #999;">搜索条件</span><i class="fa fa-angle-double-down text-primary" aria-hidden="true"></i> <i class="fa fa-angle-double-up text-primary" aria-hidden="true"></i></a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
				<div class="form-group">
					<button type="button" onclick="showAddDialog()"  class="btn btn-block btn-info">新增</button>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-xl-12">
				<div class="accordion" id="insurerListBox">
				</div>
			</div>
		</div>
		<div id="dataInfo">
		</div>
		
		<div class="row" id="pageList" style="display: none;">
			<div class="col-xl-12 text-center">
				<nav aria-label="...">
					<ul class="pagination">
						<li class="page-item previous disabled">
							<a class="page-link" href="#" onclick="goPrevious();return false;">上一页</a>
						</li>
						<li class="page-item next disabled">
							<a class="page-link" href="#" onclick="goNext();return false;">下一页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

<!-- 【编辑】弹出窗内容 -->
<div class="modal fade" id="editPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="editTitle"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form id="editForm">
					<input type="hidden" id="id" name="id">
					<div class="form-group" >
						<label for="name" style="color: red;">*名称：</label>
						<input class="form-control" type="text" name="name" id="name" >
					</div>
					<div class="form-group" >
						<label for="url">h5页面地址：</label>
						<input class="form-control" placeholder="" type="text" name="url" id="url">
					</div>
					<div class="form-group" >
						<label for="uploadFile" style="color: red;">*图片：</label>
						<img id="pictue" style="width: 100%;"><br/>
						<input class="form-control-file" type="file" id="uploadFile" name="file" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic()"/>
						<input type="hidden" name="img" id="img">
					</div>
					<div class="form-group" >
						<label for="moneyArea" style="color: red;">*价格：</label>
						<input class="form-control" placeholder="" type="text" name="money" id="money">
					</div>
					<div class="form-group" >
						<label for="moneyRemark" style="color: red;">*价格单位：</label>
						<input class="form-control" placeholder="" type="text" name="moneyUnit" id="moneyUnit">
					</div>
					<div class="form-group" >
						<label for="remark">产品描述：</label>
						<textarea class="form-control" rows="4" id="dec" name="dec"></textarea>
					</div>
					<div class="form-group" >
						<label for="remark">说明：</label>
						<textarea class="form-control" rows="4" id="remark" name="remark"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer" style="display: block; text-align: center">
				<button type="button" class="btn btn-light" style="width: 40%; max-width: 10rem;" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-info" style="width: 40%; max-width: 10rem;" onclick="confirmEdit();">确定</button>
			</div>
		</div>
	</div>
</div>


<!-- page script -->
<script>
	var maxCount = 10;
	var totalPages = 0;
	var page = 1;
	var searchClick = false;

	$(document).ready(function() {
		//加载数据
		getData();
	});

	function goMenu() {
		getHtml('/mobile/menu.html');
	}

	function search() {
		searchClick = true;
		totalPages = 0;
		page = 1;
		getData();
	}
	
	function goPrevious() {
		if (page > 1) {
			page = page - 1;
			getData();
		}
	}
	
	function goNext() {
		if (page < totalPages) {
			page = page + 1;
			getData();
		}
	}

	function getData(){
		var searchKey = $("#searchKey").val();
		var startIndex = (page - 1) * maxCount;

		var url = "/home/getInsurerList";
		params = {
				"key" : searchKey,
				"start" : startIndex,
				"length" : maxCount,
				"draw" : page
		};
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				var dataList = data.data;
				var totalCount = data.recordsTotal;
				if ((totalCount % maxCount) > 0) {
					totalPages = parseInt(totalCount / maxCount) + 1;
				} else {
					totalPages = parseInt(totalCount / maxCount);
				}
				if (page <= 1) {
					$("#pageList .previous").addClass("disabled");
				} else {
					$("#pageList .previous").removeClass("disabled");
				}
				if (page >= totalPages) {
					$("#pageList .next").addClass("disabled");
				} else {
					$("#pageList .next").removeClass("disabled");
				}
				if (totalPages <= 1) {
					$("#pageList").hide();
				} else {
					$("#pageList").show();
				}

				var dataHtml = '';
				for (let i = 0; i < dataList.length; i++) {
					let dataRecord = dataList[i];
					let id = dataRecord.id;
					if (dataRecord.appName == null) {
						dataRecord.appName = "";
					}
					if (dataRecord.appUrl == null) {
						dataRecord.appUrl = "";
					}

					dataHtml += '<div class="card" id="insurer' + i + '">';
					dataHtml += '<div class="card-header" id="insurerHeader' + i + '">';
					dataHtml += '<div>';
					dataHtml += '<div class="btn btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#insurerCollapse' + i + '" aria-expanded="true" aria-controls="insurerCollapse' + i + '">';
					dataHtml += '<div class="card-name">' + dataRecord.name + '</div>';
					dataHtml += '<div class="card-money"><span class="money">' + dataRecord.money + '</span><span class="unit">' + dataRecord.moneyUnit + '</span></div>';
					if (dataRecord.dec != "") {
						dataHtml += '<div class="card-money-remark">' + dataRecord.dec + '</div>';
					}
					if (dataRecord.url != "") {
						dataHtml += '<div class="card-f-url">' + dataRecord.url + '</div>';
					}
					if (dataRecord.remark != "") {
						dataHtml += '<div class="card-remark">' + dataRecord.remark + '</div>';
					}

					dataHtml += '</div>';
					dataHtml += '</div>';
					dataHtml += '</div>';
					
					dataHtml += '<div id="insurerCollapse' + i + '" class="collapse" aria-labelledby="insurerHeader' + i + '" data-parent="#insurerListBox">';
					dataHtml += '<div class="card-body">';
					dataHtml += '<div class="card-img-box">';
					dataHtml += '<img src="' + dataRecord.img + '" class="card-img" onclick="maxImg(' + "'" + dataRecord.img + "'" + ",'" + '保险' + "'" + ')">';
					dataHtml += '</div>';

					dataHtml += '<ul class="card-opt">';
					dataHtml += '<li class="text-primary" onclick="showEditDialog(' + id + ')"><i class="fa fa-edit"></i><span>编辑</span></li>';
					dataHtml += '<li class="text-danger" onclick="showDeleteDialog(' + id + ')"><i class="fa fa-trash-o"></i><span>删除</span></li>';
					dataHtml += '</ul>';
					
					dataHtml += '</div>';
					dataHtml += '</div>';
					
					dataHtml += '</div>';
				}
				$("#insurerListBox").html(dataHtml);
				if (totalCount > 0) {
					let startNum = startIndex + 1;
					let endNum = startIndex + dataList.length;
					$("#dataInfo").html('从 ' + startNum + ' 到 ' + endNum + ' /共 ' + totalCount + ' 条数据');
					if (searchClick) {
						$("#searchBoxCollapse").click();
					}
				} else {
					$("#dataInfo").html('没有检索到数据');
				}
				document.body.scrollTop = document.documentElement.scrollTop = 0;
				for (let i = 0; i < dataList.length; i++) {
					$("#insurerCollapse" + i).on('show.bs.collapse', function () {
						$(this).parent().attr("style", "overflow: visible; z-index: 1; box-shadow: 1px 2px 10px #2aaf98;");
					});
					$("#insurerCollapse" + i).on('hide.bs.collapse', function () {
						$(this).parent().removeAttr("style");
					});
				}
			}
			searchClick = false;
		}, true);
	}

	function showAddDialog() {
		$("#id").val("");
		$("#name").val("");
		$("#img").val("");
		$("#url").val("");
		$("#pictue").attr("src","");
		$("#money").val("");
		$("#moneyUnit").val("");
		$("#dec").val("");
		$("#remark").val("");
		$("#editTitle").text("新增保险");
		$("#editPanel").modal("show");
	}

	function showEditDialog(id) {
		$("#pictue").attr("src","");
		let url = "/home/getInsurerById";
		let params = {
				"id" : id
		}
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				let insurer = data.insurer;
				$("#id").val(insurer.id);
				$("#name").val(insurer.name);
				$("#img").val(insurer.img);
				$("#pictue").attr("src",insurer.img);
				$("#url").val(insurer.url);
				$("#money").val(insurer.money);
				$("#moneyUnit").val(insurer.moneyUnit);
				$("#dec").val(insurer.dec);
				$("#remark").val(insurer.remark);
				$("#editTitle").text("编辑保险");
				$("#editPanel").modal("show");
			}
		}, true);
	}

	function confirmEdit() {
		let name = $("#name").val();
		if( $.trim(name)  == ""){
			showErrorMessageTip("名称不能为空！", "name");
			return ;
		}
		let img = $("#img").val();
		if( $.trim(img)  == ""){
			showErrorMessageTip("图片不能为空！", "file");
			return ;
		}
		let money = $("#money").val();
		if( $.trim(money)  == ""){
			showErrorMessageTip("价格不能为空！", "money");
			return ;
		}
		let moneyUnit = $("#moneyUnit").val();
		if( $.trim(moneyUnit)  == ""){
			showErrorMessageTip("价格单位不能为空！", "moneyUnit");
			return ;
		}
		let url = "/home/updateInsurer";
		let params = JSON.stringify($("#editForm").serializeObject());
		let contentType = "application/json;charset=UTF-8";
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				$("#editPanel").modal("hide");
				getData();
			}
		}, true, false, false, contentType);
	}

	function showDeleteDialog(id) {
		showConfirmBox("确定要删除吗？", function(result) {
			if (result == "yes") {
				let url = "/home/deleteInsurer";
				let params = {
						"id" : id
				}
				getMapData(url, params, function(data, result) {
					if (result == "success") {
						getData();
					}
				}, true);
			}
		});
	}

	//上传图片
	function uploadPic() {
		var formData=new FormData();
		formData.append("pic",document.getElementById("uploadFile").files[0]);
		formData.append("type",6);
		$.ajax({
			type : 'post',
			url : "/upload/uploadPicFile",
			data: formData,
			contentType: false,
			processData: false,
			success : function(data) {
				let error = data.error;
				let message = data.message;
				if (error) {
					showErrorMessageBox(message);
				} else {
					let url = data.data.url;
					$("#pictue").attr("src",url);
					$("#img").val(url)
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				showErrorMessageBox("请求超时，请重试");
			}
		});
	}

</script>
</body>
</html>
